<template>
  <view style="font-size: 30rpx;">
    <view class="navbar">
      <u-icon name="arrow-left" color="#191919" size="20" @click="goBack()" class="back-box"></u-icon>
      <view class="title">预警信息</view>
      <view class="searchs-box">

        <view class="search-item tags">
          <view v-for="(item,index) in datelist" :key="index" @click="sectionChange(item)" class="tag-view"
            :class="{'active': item.value === curDateType}">
            {{item.name}}
          </view>
        </view>
        <view @click="showPopClicks" class="search-item">
          <text>更多查询</text>
          <image src="@/static/images/common/more-fliter.png"
            style="width: 20px;height:20px;position:relative;top:8rpx;" />
        </view>
      </view>
    </view>
    <view class="content">
      <view class="alarm-box">
        <view class="list-info">
          <u-list>
            <u-list-item v-for="(item, index) in indexList" :key="index">
              <u-cell :title="`${item.companyName}：${item.alarmReason}`" :value="`${item.alarmTime}`">
              </u-cell>
            </u-list-item>
          </u-list>
          <u-loadmore :status="hasMore" style="padding:10rpx 0 30rpx 0;" loadmoreText="上拉加载更多" />
        </view>
      </view>

    </view>
    <u-back-top :scroll-top="scrollTop" :top="top" mode="square" :iconStyle="iconStyle"></u-back-top>
    <alarm-search ref="alarmSearchRef" :show="popShow" @filterChange="sureClick" :showPurchase="showPurchase"
      :showAlarm="showAlarm" @closePop="popShow=false"></alarm-search>
  </view>
</template>

<script>
  import {
    getDeviceLists,
    getwaybillLists
  } from "@/api/home";
  import update from "@/components/update/index";
  export default {
    components: { update },
    data() {
      return {
        popShow: false,
        // 返回顶部组件参数
        scrollTop: 0,
        top: "600",
        iconStyle: {
          fontSize: "32rpx",
          color: "#2979ff",
        },
        loading: false,
        hasMore: "loadmore",
        datelist: [{ name: '运单告警', value: "1" }, { name: '采集器告警', value: "2" }],
        indexList: [
        ],
        status: '',
        showAlarm: true,
        showPurchase: true,
        itemName: '运单告警',
        // 分页参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        list: [],
        isBack: false,
        curDateType: "1",
      };
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onReachBottom() {
      if (this.status == "nomore") return;
      this.loadMore();
    },
    onPullDownRefresh() {
      this.getList(this.queryParams, 1);
      uni.stopPullDownRefresh();
    },
    onLoad(e) {
      this.curDateType = e?.types
      this.getList(this.queryParams);
    },
    created() {
      this.scrollTop = 0;
    },
    methods: {
      goBack() {
        const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack({
            delta: 1
          });
        } else {
          // 如果是第一个页面，可以跳转到首页
          uni.switchTab({
            url: '/pages/home/index'
          });
        }
      },
      async loadMore() {
        // 如果正在加载或没有更多数据，则返回
        this.queryParams.pageNum += 1
        this.getList(this.queryParams)
      },

      sureClick(data) {
        console.log("进入确认方法", data)
        let queryPa = {
          pageNum: 1,
          pageSize: 10,
        }
        if (this.curDateType == "1") {
          queryPa = { ...queryPa, alarmType: data.alarmType, enterpriseType: data.customerType, companyId: data.companyId, purchaseName: data.purchaseName }
        } else {
          queryPa = { ...queryPa, enterpriseType: data.customerType, companyId: data.companyId }
        }
        this.queryParams = queryPa
        this.getList(queryPa, 1)
      },
      showPopClicks() {
        this.popShow = true;
      },
      sectionChange(item) {
        let queryParams = {
          pageNum: 1,
          pageSize: 10,
        }
        if (item.value == '1') {
          queryParams['alarmType'] = [2, 3, 4, 5, 6, 7]
        }
        this.curDateType = item.value;
        this.loading = false
        this.hasMore = 'loadmore'
        this.$refs.alarmSearchRef.resetFilter()
        this.resetForm()
        this.getList(queryParams, 1)
      },
      resetForm() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
      },
      tabsclick(e) {
      },
      async getList(queryParams, way = 0) {
        if (way == 1) {
          this.indexList = []
        }
        let res = {}
        if (this.curDateType == "1") {
          this.showAlarm = true
          this.showPurchase = true

          if (!!queryParams.alarmType) {
            let ss = typeof queryParams.alarmType
            if (typeof queryParams.alarmType != 'object') {
              queryParams.alarmType = [queryParams.alarmType]
            }
          } else {
            queryParams.alarmType = [2, 3, 4, 5, 6, 7]
          }
          res = await getwaybillLists(queryParams)
        } else {
          this.showAlarm = false
          this.showPurchase = false

          res = await getDeviceLists(queryParams)
        }
        if (res.code == 200) {
          if (res.rows.length > 0) {
            this.indexList = [...this.indexList, ...res.rows]
            this.$nextTick(() => {
            });
            if (res.rows.length < queryParams.pageSize) {
              this.hasMore = 'nomore'
            } else {
              this.hasMore = 'loadmore'
            }
          } else {
            if (queryParams.pageNum == 1) this.indexList = []
            this.hasMore = 'nomore'
          }
        }
      },
    },
  };
</script>

<style scoped lang="less">
  .empty-box {
    padding-bottom: 60rpx;
  }

  .search-item {
    font-size: 31rpx !important;
  }

  .tags {
    width: 374rpx;
  }

  .content {
    padding: 247rpx 20rpx 20rpx 20rpx;
  }

  /deep/.u-cell__title-text {
    font-size: 31rpx !important;
    font-weight: 500 !important;
    color: #333;
  }

  .content {
    .alarm-box {
      width: 100%;
    }

    .title-box {
      background-image: url("/static/images/home/bg.png");
      color: #FFFFFF;
      height: 314rpx;
      border-radius: 10rpx;
      font-size: 26rpx;
      padding: 40rpx 20rpx;

      .title-name {
        font-size: 28rpx;
      }

      .data-box {
        .value-box {
          .value {
            uni-text {
              color: #fff !important;
              font-size: 48rpx !important;
              font-weight: bold !important;
            }
          }
        }
      }
    }

    .volumn-box {
      margin-top: 10rpx;
      height: 732rpx;

      .data-box {
        width: 49%;
        background: #fff;
        padding: 20rpx;
        height: 132rpx;

        .value-box {
          display: flex;
          align-items: baseline;
          height: 90rpx;
          line-height: 70rpx;

          .value {
            font-size: 40rpx;
            font-weight: bold;
            color: #000;
          }
        }
      }

      .odd {
        margin-right: 2%;
      }

      .even {
        margin-bottom: 2%;
      }
    }

    .data-box {
      width: 49.5%;
      border-radius: 10rpx;
      float: left;

      .value-box {
        display: flex;
        align-items: baseline;
        height: 90rpx;
        line-height: 70rpx;

        .unit {
          font-size: 26rpx;
          font-weight: 400;
        }
      }
    }

    .chart-content {
      margin-top: 32rpx;

      .chart-box {
        width: 450rpx;
        height: 450rpx;
        margin: 32rpx auto;
        position: relative;

        .chart-title {
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;

          .center-label {
            .title {
              font-size: 35rpx;
              color: #666666;
              margin-bottom: 10rpx;
            }

            .value-1 {
              display: initial;
              padding: 0 50rpx;
              margin-top: 10rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #536FC8;
              font-size: 40rpx;
              color: #536FC8;

            }

            .value-2 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #95CA74;
              font-size: 40rpx;
              color: #95CA74;
            }

            .value-3 {
              display: initial;
              padding: 0 50rpx;
              width: auto;
              height: 64rpx;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
              opacity: 1;
              border: 1px solid #F5C756;
              font-size: 40rpx;
              color: #F5C756;

            }
          }

          .top-20 {
            margin-top: 40rpx;
          }

        }
      }

    }

    .list-info {
      background-color: #ffffff;
      min-height: 1760rpx;

      /deep/.title .u-cell__title-text {
        font-size: 30rpx !important;
        color: #999999 !important;
      }


      /deep/.u-line {
        background: #FFFFFF;
        border-bottom: #FFFFFF;
        border-top-color: #FFFFFF;
        border-right-color: #FFFFFF;
        border-left-color: #FFFFFF;
      }

      /deep/.title .u-line {
        border-bottom: none !important;
      }
    }
  }
</style>